<template>

    <mi-list-page>

        <mi-table :list="list" max-height="calc(100vh - 210px)">
            <template #topBar>
                <mi-top-bar :data="topToolbar"></mi-top-bar>
            </template>

            <template #toolbar="{row}">
                <el-space wrap>
                    <el-button link type="primary" @click="lineToolbarEvent(row, 'edit')" v-auth="auth.edit">编辑</el-button>
                    <el-button link type="primary" @click="lineToolbarEvent(row, 'del')" v-auth="auth.del" v-if="![1,2,3,5].includes(row.id)">删除</el-button>
                </el-space>
            </template>

        </mi-table>

    </mi-list-page>

    <mi-back-page v-model:show="edit.show">
        <single-edit />
    </mi-back-page>

</template>


<script setup lang="ts">

import {computed, getCurrentInstance, provide, reactive, ref, watch} from "vue"
import {makeModelAuth} from "@/utils/auth";
import global from "@/dict/global";
import List from "@/model/list";
import Edit from "@/model/edit";
import SingleEdit from "@/views/site/singleEdit.vue";

const auth = makeModelAuth('single')

const { proxy } : any = getCurrentInstance()

const tdWidth = global.tdWidth

// toolbar 事件
const topToolbar = [
    {
        auth: auth.add,
        type: 'success',
        icon: 'Plus',
        title: '新增',
        event: (ids:Array<number>) => {
            list.currentRow = null
            edit.show = true
        }
    },
    {
        auth: auth.del,
        title: '删除',
        type: 'danger',
        icon: 'Delete',
        event: (ids:Array<number>) => {
            list.del({
                url: `/${auth.del}`,
                ids: ids
            })
        }
    },
]


const lineToolbarEvent = (row:any, type:string) => {
    if (type == 'edit'){
        list.currentRow = row
        edit.show = true
    }else if (type == 'del'){
        list.del({
            url:`/${auth.del}`,
            ids: [row.id]
        })
    }
}


const list = reactive(new List({
    where: {},
    url: `/${auth.index}`,
    columns:[
        {name: "check", type:'selection'},
        {name: "id", title:'ID', width:tdWidth.id},
        {name: "title", title: "标题", minWidth: tdWidth.title},
        {name: "status", title: "状态", minWidth: tdWidth.min, type:"switch", align: "center"},
        {title: "操作", type:'slot', slot:'toolbar', fixed:'right'},
    ]
}))

const edit = reactive(new Edit({}))

provide("list", list)
provide("edit", edit)

</script>

<style scoped>

</style>
